<template>
  <div>
    <table-box ref="tableBox" no-request show-index show-selection :other-filters="comFiltersRaw" :other-raw="comParamsRaw" :table-config="tableConfig" @selection-change="handleSelectionChange" @btnOperate="handleBtnOperate" />
    <export-files
      v-if="exportisible"
      title="导出"
      :visible.sync="exportisible"
      download-url=""
      download-prefix=""
      :config="exportConfig"
      :success-fun="(config,res)=>{}"
      @success="handleExportSuccess"
    />
    <PersonChange ref="change_person" @on-success="()=>refreshTableBoxData('onPage')" />
  </div>
</template>
<script>
import PersonChange from './PersonChange'
import { getToken } from '@/utils/auth'
export default {
  name: 'Table',
  components: {
    PersonChange
  },
  props: {
    filtersRaw: {
      type: Array,
      default: () => []
    },
    paramsRaw: {
      type: Object,
      default: () => ({})
    },
    fixedFiltersRaw: {
      type: Array,
      default: () => []
    },
    fixedParamsRaw: {
      type: Object,
      default: () => ({})
    },
    tableIndex: {
      type: Number,
      default: 1
    },
    buttonGroupCode: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/ctmShopReformTaskFollowUp/page`,
        hideSearchBar: true,
        tabIndex: 1,
        sort: 'createTime',
        order: 'ASC',
        // sortersRow: [
        //   { 'id': 'createTime', 'property': 'createTime', 'direction': 'DESC' },
        //   { 'id': 'taskCode', 'property': 'marketCode', 'taskCode': 'DESC' }
        // ],
        setting: [
          {
            prop: 'taskCode',
            label: '门店升级任务号',
            className: 'btn-green',
            minWidth: 180,
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'marketCode',
            label: '市场编码',
            minWidth: 120
          },
          {
            prop: 'marketName',
            label: '市场名称',
            minWidth: 120
          },
          {
            prop: 'marketType',
            label: '市场类型',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'TOBE_MARKET_TYPE'
            }
          },
          {
            prop: 'taskDate',
            label: '任务月份',
            minWidth: 120
          },
          {
            prop: 'taskType',
            label: '任务类型',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CTM_MARKET_TASK_TYPE'
            }
          },
          {
            prop: 'agencyName',
            label: '办事处名称',
            minWidth: 130
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: 120
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: 120
          },
          {
            prop: 'dataSource',
            label: '数据来源',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CTM_MARKET_DATA_FROM'
            }
          },
          {
            prop: 'responsibleCode',
            label: '责任人账号',
            minWidth: 120
          },
          {
            prop: 'responsibleName',
            label: '责任人姓名',
            minWidth: 120
          },
          {
            prop: 'responsiblePhone',
            label: '责任人电话',
            minWidth: 130
          },
          {
            prop: 'marketFollowUpStage',
            label: '市场跟进进度',
            minWidth: 130,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CTM_MARKET_BUID_PROGRESS'
            }
          },
          {
            prop: 'settlementTime',
            label: '结案日期',
            minWidth: 140,
            formatData: this.$trimHMSFormatData('settlementTime')
          },
          {
            prop: 'settlementMethod',
            label: '结案类型',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CTM_CLOSED_TYPE'
            }
          },
          {
            prop: 'shopBuildType',
            label: '门店建设类型',
            minWidth: 140,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CONST_TYPE'
            }
          },
          {
            prop: 'shopBuildNumber',
            label: '门店建设项目号',
            minWidth: 150
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: 120,
            formatData: v => {
              return [1, '1'].includes(v.enable) ? '启用' : '停用'
            }
          },
          {
            prop: 'createTime',
            label: '分配时间',
            minWidth: 140
          }
        ],
        btnList: process.env.NODE_ENV === 'development' ? [
          { buttonName: '编辑', optCode: 'edit', outerFlag: true },
          { buttonName: '导出', optCode: 'export', outerFlag: true },
          { buttonName: '变更责任人', optCode: 'change_person', outerFlag: true }
        ] : null
      },
      exportisible: false,
      selectedRows: []
    }
  },
  computed: {
    exportConfig() {
      return [
        {
          code: '1',
          name: '市场开发-升级月度任务跟进',
          async: false, // 同步导出数据
          templateCode: '', // 模板code
          dataApi: `${process.env.VUE_APP_BASE_API}/api/v1/ctmShopReformTaskFollowUp/export`, // 数据导出api
          headers: { token: getToken() },
          filtersRaw: this.comFiltersRaw, // 符合当前查询条件的所有数据行的导出条件(当前数据查询结果对应的条件)
          paramsRaw: this.comParamsRaw,
          sort: 'createTime', // 排序字段
          order: 'desc', // 排序方式
          selectedRows: this.selectedRows, // 当前所选中的数据行
          queryField: 'id'// 指定行导出时使用的查询字段名称
        }
      ]
    },
    comFiltersRaw() {
      return [...this.filtersRaw, ...this.fixedFiltersRaw]
    },
    comParamsRaw() {
      return { ...this.paramsRaw, ...this.fixedParamsRaw }
    }
  },
  created() {
    this.$set(this.tableConfig, 'tableIndex', this.tableIndex)
    this.$set(this.tableConfig, 'buttonGroupCode', this.buttonGroupCode)
  },
  mounted() {
    this.refreshTableBoxData()
  },
  methods: {
    refreshTableBoxData(flag) {
      this.$refs.tableBox && this.$refs.tableBox.initTableData(flag)
    },
    refreshTableHeight() {
      this.$refs.tableBox && this.$refs.tableBox.refreshTableHeight()
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handleBtnOperate(flag) {
      this[flag] && this[flag]()
    },
    edit() {
      if (!this.singleJudge(this.selectedRows, '编辑', true)) {
        return
      }
      this.$pageStack.push('src/views/channelTask2/storeUpgrade/monthTask/components/addEdit.vue', {
        props: {
          id: this.selectedRows[0].id
        }
      }, (flag) => {
        flag && this.refreshTableBoxData(flag)
      })
    },
    toDetail(row) {
      this.$pageStack.push('src/views/channelTask2/storeUpgrade/monthTask/components/detail.vue', {
        props: {
          id: row.id
        }
      })
    },
    export() {
      this.exportisible = true
    },
    change_person() {
      if (!this.singleJudge(this.selectedRows, '变更责任人', true)) {
        return
      }
      this.$refs.change_person.openDialog(this.selectedRows[0])
    },
    handleExportSuccess() {

    }
  }
}
</script>
